<template>
  <el-drawer
    ref="drawerRef"
    :model-value="modelValue"
    :modal-class="modalClass"
    v-bind="$attrs"
    @open="emit('open')"
    @close="close"
  >
    <template v-for="(_, name) in $slots" #[name]="slotData" :key="name">
      <slot :name="name" v-bind="slotData" />
    </template>
  </el-drawer>
</template>

<script setup>
import { ModalEmits } from '@/components/modal/emit'
import { DrawerProps } from './props'
import useConfigStore from '@/store/modules/config'

const modelValue = defineModel({
  type: Boolean,
  default: false,
})
const props = defineProps(DrawerProps)
const emit = defineEmits(ModalEmits)

const globalBlur = computed(() => useConfigStore().globalConfig.isBlur)
const modalClass = computed(() => {
  const p = props
  if (globalBlur.value && p.followConfigBlur) return p.modalClass
  if (!p.followConfigBlur && !p.isBlur) return null

  return p.isBlur ? p.modalClass : null
})

const drawerRef = ref(null)

function close() {
  modelValue.value = false
  emit('close')
}

function handleClose() {
  drawerRef.value.handleClose()
}

defineExpose({ handleClose })
</script>
